<template>
  <div class="article" @click="$router.push(`/special/${id}/details`)">
    <div class="article__header">
      <div class="article__header__title">{{ title }}</div>
    </div>
    <div class="article__footer flex-ac">
      <span class="username">{{ user.nickname }}</span>
      <span class="drop"></span>
      <span class="date">{{ createTime }}</span>
      <div class="dian flex-ac">
        <SvgIcon name="good" />
        <span class="count">{{ liveCount }}</span>
      </div>
      <div class="comment flex-ac">
        <SvgIcon name="pinglun" />
        <span>评论</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ISpecualList } from '@/interface/ISpecual';
defineProps<ISpecualList>()
</script>

<style lang="scss" scoped>
.article {
  display: grid;
  grid-template-rows: 2fr;
  gap: 14px;
  padding: 20px 16px;
  border-bottom: 1px solid #efefef;

  &__footer {
    gap: 10px;
    font-size: 14px;
    color: #aaa;

    .username {
      color: $color;
    }

    .drop {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #eee;
    }

    .dian,
    .comment {
      gap: 4px;
    }
  }
}
</style>